<script setup lang="ts">
  import { computed, provide } from "vue";

  defineOptions({
    name: "umi-radio-group",
  });

  interface RadioGroupProps {
    modelValue?: string | number;
    defaultValue?: string | number;
    mode?: string;
    direction?: string;
    gap?: string | number;
  }

  const props = withDefaults(defineProps<RadioGroupProps>(), {
    direction: "horizontal",
    gap: 0,
  });

  provide("currentKey", props.modelValue);
  provide("defaultValue", props.defaultValue);
  provide("groupName", "group-" + new Date().getTime());

  const classNames = computed(() => {
    return {
      "umi-radio-group": true,
      ["umi-radio-group-" + props.direction]: true,
    };
  });
</script>

<template>
  <div :class="classNames">
    <umi-container :direction="direction" align="start" :gap="gap">
      <slot></slot>
    </umi-container>
  </div>
</template>

<style lang="scss" scoped>
  .umi-radio-group {
    border-radius: 4px;
    border-top: 1px solid #efefef;
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
  }
</style>
